<template>
  <div>
    <!-- 导航 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="待付款" name="second"></el-tab-pane>
      <el-tab-pane label="待发货" name="third"></el-tab-pane>
      <el-tab-pane label="已发货" name="fourth"></el-tab-pane>
      <el-tab-pane label="已收货" name="received"></el-tab-pane>
      <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      <el-tab-pane label="已关闭" name="closed"></el-tab-pane>
      <el-tab-pane label="退款中" name="progress"></el-tab-pane>
    </el-tabs>
    <!-- 按钮 -->
    <el-button type="success">导出数据</el-button>
    <el-button type="danger">批量删除</el-button>
    <el-button type="info">搜索</el-button>
    <el-button>高级搜索</el-button>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "second",
      input: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
</style>